<template>
  <div style="background: #fff">
    <div>
      <van-nav-bar
        title="用户注册"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="resbox">
      <!-- 步骤条 -->
      <van-steps :active="active">
        <van-step>电子邮箱</van-step>
        <van-step>发送验证码</van-step>
        <van-step>填写信息</van-step>
        <van-step>注册成功</van-step>
      </van-steps>
      <!-- tab栏 -->
      <van-tabs v-model="active">
        <van-tab title="">
          <div style="padding: 23px">
            <van-field
              class="emaiput"
              v-model="user.email"
              clearable
              label="电子邮箱"
              left-icon="smile-comment"
              :autofocus="auto"
              @keyup="change"
              placeholder="输入电子邮箱"
            />
            <div style="margin-top: 50px">
              <van-button
                @click="lastbtn"
                class="lasbtn"
                round
                :disabled="btndisabled"
                type="danger"
                >下一步</van-button
              >
            </div>
          </div>
        </van-tab>
        <van-tab title="">
          <div class="codebox">
            <div class="imgtitle"></div>
            <p data-v-27002542="" class="notice-text">
              我们将以电子邮箱的形式将验证码发送给您，请注意查收
            </p>
            <div class="inputcodebox">
              <van-field
                v-model.number="sms"
                center
                clearable
                @keyup="codechange"
                class="codesms"
                label=""
                placeholder="请输入邮箱验证码"
              >
                <template #button>
                  <van-tag
                    v-if="isTiemeshow"
                    class="sendcode"
                    color="#ffe1e1"
                    size="large"
                    text-color="#ad0000"
                    ><van-count-down
                      @finish="isTiemeshow = false"
                      :time="1000 * 60"
                      format="重新发送 ss s"
                  /></van-tag>

                  <van-tag
                    v-else
                    class="sendcode"
                    color="#ffe1e1"
                    size="large"
                    @click="senemai"
                    text-color="#ad0000"
                    >发送验证码</van-tag
                  >
                </template>
              </van-field>
            </div>
            <div class="lastbtn">
              <van-button
                @click="sedemaibtn"
                class="lasbtn"
                round
                :disabled="codedisabled"
                type="danger"
                >下一步</van-button
              >
            </div>
          </div>
        </van-tab>
        <van-tab title="">
          <div class="codebox">
            <div class="icontitle"></div>
            <p class="info_title">请设置您的个人信息</p>
            <div class="usebox">
              <van-field
                clearable
                left-icon="friends"
                class="uname"
                v-model="user.Nickname"
                label=""
                @blur="usenchange"
                placeholder="请输入您的昵称（4-10位）"
              />
            </div>
            <div class="usebox">
              <van-field
                clearable
                class="upass"
                left-icon="lock"
                v-model="user.password"
                @blur="pwdchange"
                label=""
                type="password"
                placeholder="请设置6-10位的登录密码"
              />
            </div>
            <div class="usebox">
              <van-field
                clearable
                class="upass"
                left-icon="lock"
                v-model="user.payPwd"
                @blur="payPwdchange"
                label=""
                type="password"
                placeholder="请设置6位支付密码"
              />
            </div>
            <div style="margin-top: 50px">
              <van-button
                @click="submitbtn"
                class="lasbtn"
                round
                :disabled="submitdisabled"
                type="danger"
                >完成</van-button
              >
            </div>
          </div>
        </van-tab>
        <van-tab title="">
          <div class="codebox regok">
            <div class="okicon"></div>
            <h3>注册成功</h3>
            <el-button type="primary" @click="backlogin" class="backto" round
              >返回登录</el-button
            >
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: -1, //步骤条 tab栏索引
      btndisabled: true,
      codedisabled: true,
      submitdisabled: true,

      auto: true,
      sms: "", //验证码
      newsms: "", //收到的验证码
      //用户信息
      user: {
        Account: "",
        password: "",
        Nickname: "",
        email: "",
        payPwd: "",
        userImg: "head.png",
        isFace: "false",
        isPay: "true",
        facestatus: "false",
      },
      flag: false,
      isTiemeshow: false,
    };
  },
  methods: {
    onClickLeft() {
      //路由返回
      this.$dialog
        .confirm({
          message: "确认返回？此操作将会取消注册",
          theme: "round-button",
        })
        .then(() => {
          this.$router.go(-1);
        })
        .catch(() => {
          // on cancel
        });
    },
    async lastbtn() {
      //下一步索引改变
      const { data: res } = await this.$http.get("userVerification", {
        params: { email: this.user.email },
      });

      if (res.status == 202) {
        this.$toast({
          message: "该邮箱已被注册！",
          position: "top",
        });
        this.user.email = "";
      } else {
        this.active++;
      }
    },
    change() {
      //验证邮箱
      if (this.user.email == "") {
        this.btndisabled = true;
      }
      var reg =
        /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/;
      if (!reg.test(this.user.email)) return false;
      this.btndisabled = false;
    },
    codechange() {
      //验证码非空判断
      if (this.sms == "") {
        this.codedisabled = true;
      } else {
        this.codedisabled = false;
      }
    },
    sedemaibtn() {
      //点击按钮验证 邮箱验证码是否正确
      if (this.sms != this.newsms) {
        this.$toast({
          message: "验证码不正确",
          position: "top",
        });
      } else {
        this.active++;
      }
    },
    async senemai() {
      //发送请求 发送邮箱验证码
      this, (this.isTiemeshow = true);
      const { data: res } = await this.$axios.get("mailbox", {
        params: {
          email: this.user.email,
          content: "您正在进行用户注册",
          title: "乐淘购注册",
        },
      });
      this.newsms = res.code;
    },
    usenchange() {
      //昵称验证
      if (this.user.Nickname.length >= 4 && this.user.Nickname.length <= 6) {
      } else {
        this.$toast({
          message: "昵称格式不符",
          position: "top",
        });
        this.user.Nickname = "";
      }
    },
    pwdchange() {
      //密码验证
      if (this.user.password == "") return (this.submitdisabled = true);
      var Pattern = /^(\w){6,10}$/;
      if (!Pattern.test(this.user.password)) {
        this.$toast({
          message: "密码格式错误",
          position: "top",
        });
        this.submitdisabled = true;
      }
      this.submitdisabled = false;
    },
    payPwdchange() {
      if (this.user.payPwd == "") return (this.submitdisabled = true);
      var Pattern = /^(\w){6}$/;
      if (!Pattern.test(this.user.payPwd)) {
        this.$toast({
          message: "支付密码格式错误",
          position: "top",
        });
        this.user.payPwd = "";
        this.submitdisabled = true;
      }
      this.submitdisabled = false;
    },
    async submitbtn() {
      //注册请求
      this.$toast.loading({
        message: "正在注册...",
        forbidClick: true,
        loadingType: "spinner",
        onClose: this.adduser(),
      });
      this.user.Account = Math.random().toString(30).substr(2);

      this.user.token = Math.random().toString(30).substr(2);
      const { data: res } = await this.$http.post("addUser", this.user);
      console.log(res);
      if (res.status !== 200) {
        this.$toast({
          message: "注册失败",
          position: "top",
        });
      }
    },
    backlogin() {
      this.$router.push("/login");
    },
    adduser() {
      setTimeout(() => {
        this.active++;
      }, 2500);
    },
  },
  mounted() {
    this.user.email = "";
  },
  activated() {
    this.active = -1;

    this.user.email = "";
    // this.sms = "";
    this.user.Nickname = "";
    this.user.password = "";
  },
};
</script>
<style lang="less" scoped>
.emaiput {
  border-bottom: 1px solid #d9d6d6;
}
.lasbtn {
  width: 100%;
}
.codebox {
  padding: 1.375rem 1.5rem 1rem;
  .imgtitle {
    width: 5.5rem;
    height: 4.4375rem;
    background: url(https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/emai.png)
      no-repeat;
    background-size: cover;
    margin: 0 auto;
    // margin-top: 2rem;
  }
  .notice-text {
    font-size: 1rem;
    margin-top: 0.6rem;
  }
  .inputcodebox {
    margin-top: 1rem;
    .codesms {
      font-size: 1rem;
      border-bottom: 1px solid #c7c7c7;
    }
  }
  .lastbtn {
    margin-top: 1rem;
  }
  .sendcode {
    height: 2rem;
    width: 5.5rem;
    border-radius: 20px;

    padding-left: 23px;
  }
}
.icontitle {
  width: 6.5rem;
  height: 4.4375rem;
  background: url(https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/pwd_icon.fa526d8.png)
    no-repeat;
  background-size: cover;
  margin: 0 auto;
}
.info_title {
  font-size: 1rem;
  text-align: center;
  margin-top: 1rem;
}
.usebox {
  margin-top: 1rem;
  .uname {
    // border-bottom: 1px solid #c0bcbc;
    font-size: 1rem;
  }
  .upass {
    font-size: 1rem;
  }
}
.okicon {
  width: 10.5rem;
  height: 10.4375rem;
  background: url(https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/regoks.png)
    no-repeat;
  background-size: cover;
  margin: 0 auto;
}
.regok {
  h3 {
    text-align: center;
    margin-top: 0.5rem;
  }
}
.backto {
  width: 120px;
  margin-left: 105px;
  margin-top: 20px;
}
</style>